<template>
  <q-dialog v-model="pop" persistent>
    <q-card :style="{width: width, 'max-width': '90vw'}">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{config.title}}</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-card-section>
        <q-form ref="detailForm">
          <dialogInput ref="detailInputs" :fieldlist="config.fields" :column="column">
            <template v-for="key in tableColumns" v-slot:[key]="{ props }">
              <slot :props="props" :name="key" />
            </template>
          </dialogInput>
        </q-form>
        <slot>
        </slot>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat :label="buttonLabel[1] || '返回'" color="primary" v-close-popup @click="cancel" />
        <q-btn :label="buttonLabel[0] || '保存'" color="primary" @click="submit" v-show="canSubmit" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
import dialogInput from 'src/components/DialogInput.vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    dialogInput
  },
  props: {
    config: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: 'sm'
    },
    column: { // 列数
      type: Number,
      default: 1
    },
    buttonLabel: {
      type: Array,
      default: () => ['保存', '返回']
    },
    canSubmit: {
      type: Boolean,
      default: true
    }
  },
  emits: ['submit'],
  data () {
    return {
      pop: false,
      promiseResult: null
    }
  },
  methods: {
    submit () {
      // 对select先进行有效性验证
      for (const field in this.config.fields) {
        if (['select', 'toggleSelect'].includes(this.config.fields[field].type)) {
          this.$refs.detailInputs.$refs[field][0].$refs.select.validate();
        }
      }

      this.$nextTick(() => {
        this.$refs.detailForm.validate().then(outcome => {
          if (outcome) {
            this.$refs.detailInputs.getFormData().then(formData => {
              this.promiseResult.resolve(formData);
              this.$emit('submit', formData);
              this.pop = false;
            });
          }
        });
      });
    },
    show () {
      this.pop = true;

      return new Promise((resolve, reject) => {
        this.promiseResult = { resolve, reject };
      });
    },
    hide () {
      this.pop = false;
    },
    cancel () {
      this.promiseResult.resolve(null);
      this.$emit('submit', null);
    }
  },
  computed: {
    // 是否有图片
    hasImage () {
      let flag = false;
      for (const key in this.config.fields) {
        if (this.config.fields[key].type === 'image') {
          flag = true;
          break;
        }
      }
      return flag;
    },
    width () {
      const allSize = {
        sm: '350px',
        md: '50vw',
        lg: '80vw'
      };

      return allSize[this.size];
    },
    tableColumns () {
      const list = [];
      Object.keys(this.config.fields)
        .filter(key => this.config.fields[key].type === 'table')
        .forEach(key => {
          this.config.fields[key].columns.forEach(col => {
            list.push(`${key}-body-${col.name}`);
          });
        })
      return list;
    }
  },
  watch: {
    pop (val) {
      this.$emit(val ? 'show' : 'hide');
    }
  }
});
</script>
